<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="lib/vue-resource-1.3.4.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7.css" />


<div id="app">
	<div id="" class="panel panel-primary">
		<div class="panel-heading">
			<div id="" class="panel-title">
				添加商品
			</div>
		</div>

		<div class="panel-body">
			<label for=""><input class="form-control" v-model="femalename" v-focus v-color="'red'" /></label>
			<label for=""><input type="button" value="添加" class="btn btn-primary" @click="add" /></label>
		</div>
	</div>

	<table cellspacing="" cellpadding="" class="table table-bordered table-hover table-striped">
		<thead>
			<tr>
				<th>id</th>
				<th>name</th>
				<th>时间</th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(item,i) in res" :key="item.id">
				<td>{{i+1}}</td>
				<td v-attr>【{{item.femalename }}】</td>
				<td>{{newtime | attr()}}</td>
				<td>
					<a href="" @click.prevent="del(i)">删除</a>
				</td>
			</tr>
		</tbody>
	</table>

</div>

<script type="text/javascript">
	Vue.config.keyCodes.f2 = 113;
	Vue.http.options.root = 'https://www.apiopen.top'

	// 自定义过滤器  过滤器  es6的写法
	Vue.filter('attr', function (dateStr, geshi = ' ') {
		var dt = new Date(dateStr);
		var y = dt.getFullYear();
		var m = dt.getMonth() + 1;
		var d = dt.getDay();
		m = m > 9 ? m : '0' + m;
		d = d > 9 ? d : '0' + d;
		//后续 d = d > 9 ? d : '0' + d;  ===》dt.getHours().toString().padStart('2', 0)
		//两种搞定不报错的方式
		//if(geshi&&geshi.toLowerCase()) {
		if (geshi.toLowerCase() === 'yyyy-mm-dd') {
			//					第一种方式不够美观
			//return y  + '-' + m + '-' + d;
			return `${y}-${m}-${d}`
		} else {
			var hh = dt.getHours().toString().padStart('2', 0)
			var mm = dt.getMinutes().toString().padStart('2', 0)
			var ss = dt.getSeconds().toString().padStart('2', 0)
			return `${y}-${m}-${d}   ${hh}:${mm}:${ss}`
		}
	})

	var vm = new Vue({
		el: '#app',
		data: {
			list: [
				{ id: 1, name: '奔驰', ctime: new Date() },
				{
					id: 2,
					name: '宝马',
					ctime: new Date()
				},
			],
			res: '',
			femalename: '',
			i: '25',
			newtime: new Date(),
		},

		created() {
			this.getinfo();
		},

		methods: {
			add() {
				this.$http.post('https://www.apiopen.top/femaleNameApi?page=30').then(res => {
					if (res.status == 200) {
						this.res = JSON.parse(res.bodyText).data
					}
					this.getinfo();
				}).catch(() => {
					console.log("请求失败");
				})
			},
			del(id) {
				this.$http.get('https://www.apiopen.top/femaleNameApi?page=' + id).then(res => {
					if (res.status == 200) {
						this.res = JSON.parse(res.bodyText).data
						console.log(this.res)
					}
				}).catch(() => {
					console.log("请求失败");
				})
			},
			getinfo() {
				this.$http.get('femaleNameApi?page=20').then(res => {
					if (res.status == 200) {
						this.res = JSON.parse(res.bodyText).data
						console.log(this.res)
					}
				}).catch(() => {
					console.log("请求失败");
				})
			}
		},
		directives: {
			'focus': {
				inserted: function (el) {
					el.focus()
				},
			},
			'color': function (el, color) {
				el.style.color = color.value;
			}
		}
	})
</script>